<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2015/3/27
  Time: 3:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/my.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <%--<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>--%>
    <%--<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/bootstrap.css">--%>
    <%--<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery.min.js"></script>--%>
    <%--&lt;%&ndash;<link href=""<%=request.getContextPath() %>/resources/css/main/css/form.css" rel="stylesheet" type="text/css" media="all" />&ndash;%&gt;--%>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/bootstrap.js"></script>
    <%--<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/bootstrap.css">--%>
    <%--<link href=""<%=request.getContextPath() %>/resources/css/main/css/form.css" rel="stylesheet" type="text/css" media="all" />--%>
    <%--<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/bootstrap.js"></script>--%>
    <link href="<%=request.getContextPath() %>/resources/css/main/style.css" rel="stylesheet" type="text/css" media="all" />
    <%--<script src="<%=request.getContextPath() %>/resources/js/jquery1.min.js"></script>--%>
    <!-- start menu -->
    <link href="<%=request.getContextPath() %>/resources/css/main/megamenu.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/megamenu.js"></script>
    <script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery.jscrollpane.min.js"></script>
    <%--<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery.min.js"></script>--%>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery.fly.min.js"></script>
    <!--[if lte IE 9]>
    <script src="<%=request.getContextPath() %>/resources/js/requestAnimationFrame.js"></script>

    <![endif]-->
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/demo.css">
    <%--<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>--%>
    <script src="<%=request.getContextPath() %>/resources/js/awardRotate.js"></script>
   <style >
       .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}
   </style>
    <script type="text/javascript" id="sourcecode">
        $(function()
        {
            $('.scroll-pane').jScrollPane();
        });
    </script>
    <!-- start details -->
    <script src="<%=request.getContextPath() %>/resources/js/slides.min.jquery.js"></script>
    <script>

        $(function(){

            $('#products').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                effect: 'slide, fade',
                crossfade: true,
                slideSpeed: 350,
                fadeSpeed: 500,
                generateNextPrev: true,
                generatePagination: false
            });
        });
        function addCart() {
            if(${empty loginUser})
            {
                window.location="<%=request.getContextPath() %>/user/login";
            }else{
                var offset = $("#end").offset();
                var addcar=$("#addc").offset();
                var flyer = $('<img class="u-flyer" src="'+$("#addc").attr('ref')+'">');
                flyer.fly({
                    start: {
                        left: addcar.left,
                        top: addcar.top
                    },
                    end: {
                        left: offset.left+10,
                        top: offset.top+10,
                        width: 0,
                        height: 0
                    },
                    onEnd: function(){
                        <%--alert(${goods.id})--%>
                         $.post('<%=request.getContextPath()%>/cart/addSuc',
                                {
                                    quantity: $("#quantity").val(),
                                    goodsId:${goods.id}
                                },
                                function(text, status)
                                {
                                    if(status=="success")
                                    {
                                        alert(text.msg);
                                        document.getElementById("CartCount").innerHTML=text.cart
                                    }else{
                                      alert("添加失败")
                                    }
                                });
                        this.destory();
                    }
                });
            }

        }
        function reduceNum() {
            var reduce = document.getElementById('reduce');
            var input = document.getElementById('quantity');
            var add = document.getElementById('add');
            var val = parseInt(input.value);
            if (isNaN(val) || val < 1) {
                val = 1;
            }
            if (val <= 1) {
                reduce.disable();
            }
            input.value = val - 1;
        }
        function addNum() {
            var reduce = document.getElementById('reduce');
            var input = document.getElementById('quantity');
            var val = parseInt(input.value);
            var add = document.getElementById('add');

            var stock = document.getElementById("stock").innerHTML;
            var val = parseInt(input.value);
            if (val >= stock) {

                add.disabled();
            }
            else {
                input.value = val + 1;
            }
        }

        $(function (){
            var rotateTimeOut = function (){
                $('#rotate').rotate({
                    angle:0,
                    animateTo:2160,
                    duration:8000,
                    callback:function (){
                        alert('网络超时，请检查您的网络设置！');
                    }
                });
            };


            var bRotate = false;

            var rotateFn = function (awards, angles, txt){
                bRotate = !bRotate;
                $('#rotate').stopRotate();
                $('#rotate').rotate({
                    angle:0,
                    animateTo:angles+1800,
                    duration:8000,
                    callback:function (){

                        bRotate = !bRotate;

                        $.post('<%=request.getContextPath()%>/user/active',
                                {
                                    str: txt
                                },
                                function(text, status)
                                {
                                    if(status=="success")
                                    {
                                        alert(text);
//                                      document.getElementById("CartCount").innerHTML=text.cart
                                    }
                                    else{
                                        alert("失败");
                                    }
                                });

                    }
                })
            };
            $('.pointer').click(function (){
                if(${empty loginUser}){
                    alert("用户先请登录！");
                    window.location="<%=request.getContextPath() %>/user/login";
                }else{
                    $.post('<%=request.getContextPath()%>/user/getTimes',
                        function(text, status)
                        {
                            if(status=="success")
                            {

                                if(text=="0"){
                                    alert("您的抽奖次数已用完！")
                                }else{
                                    if(bRotate)return;
                                    var item = rnd(0,7);
                                    switch (item) {
                                        case 0:
                                            //var angle = [26, 88, 137, 185, 235, 287, 337];
                                            rotateFn(0, 337, '未中奖');
                                            break;
                                        case 1:
                                            //var angle = [88, 137, 185, 235, 287];
                                            rotateFn(1, 26, '免单10元');
                                            break;
                                        case 2:
                                            //var angle = [137, 185, 235, 287];
                                            rotateFn(2, 88, '免单50元');
                                            break;
                                        case 3:
                                            //var angle = [137, 185, 235, 287];
                                            rotateFn(3, 137, '未中奖');
                                            break;
                                        case 4:
                                            //var angle = [185, 235, 287];
                                            rotateFn(4, 185, '免单5元');
                                            break;
                                        case 5:
                                            //var angle = [185, 235, 287];
                                            rotateFn(5, 185, '免单5元');
                                            break;
                                        case 6:
                                            //var angle = [235, 287];
                                            rotateFn(6, 235, '未中奖');
                                            break;
                                        case 7:
                                            //var angle = [287];
                                            rotateFn(7, 287, '免单10元');
                                            break;
                                    }
                                    console.log(item);
                                }

                            }
                            else{
                                alert("失败");
                            }
                        });

                }


            });
        });
        function rnd(n, m){
            return Math.floor(Math.random()*(m-n+1)+n)
        }

    </script>

</head>
<body>
<div id="container">
    <%@include file="/jsp/public/top.jspf"%>
    <div class="modal fade bs-example-modal-lg" style="position:absolute;z-index: 10000 ;" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">&nbsp;</h4>
                </div>

                <div class="turntable-bg"  >
                    <!--<div class="mask"><img src="images/award_01.png"></div>-->
                    <div class="pointer"><img src="<%=request.getContextPath() %>/resources/images/pointer.png" alt="pointer"></div>
                    <div class="rotate" ><img id="rotate" src="<%=request.getContextPath() %>/resources/images/turntable.png" alt="turntable"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="mainbody" >

        <div class="mens">
            <div class="main">
                <div class="wrap ">
                    <ul class="breadcrumb breadcrumb__t">商品详情</ul>
                    <div class="cont span_2_of_3" style="width: 1100px">
                        <%--//*********************四张图片--%>

                        <div class="grid images_3_of_2"  style="width: 500px">
                            <div >
                                <div id="products_example">
                                    <div id="products">
                                        <div class="products" >
                                            <div class="slides_container" style="width: 450px" >
                                                <c:forEach items="${fourImageList}" var="fourImage">
                                                    <a href="#"><img class="a" id="img1" src="<%=request.getContextPath() %>/resources/images/goodsImages/${fourImage}" alt=""  /></a>
                                                </c:forEach>
                                            </div>
                                            <ul class="pagination">
                                                <c:forEach items="${fourImageList}" var="fourImage">
                                                    <li><a href="#"><img src="<%=request.getContextPath() %>/resources/images/goodsImages/${fourImage}" width="s4" alt="1144953 3 2x"></a></li>
                                                </c:forEach>
                                                <div class="clear">

                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <%--/////******************************购买按钮--%>
                        <div class="desc1 span_3_of_2"  >
                            <h3 class="m_3">${goods.name}</h3>
                            <p class="m_5">RMB. ${goods.price} <span class="reducedfrom">Rs. 999</span> </p>
                            <div class="btn_form">
                                <form id="addCart" method="post" action="<%=request.getContextPath()%>/cart/userToPay1">

                                        <div class="input-group " style="width: 120px">
                                            <span class="input-group-btn"  >
                                                <button id="reduce" class="btn btn-default" type="button"  onclick="reduceNum()">-</button>
                                            </span>
                                            <input  id="quantity" name="quantity"  type="text"  class="form-control" value="1" >
                                            <span class="input-group-btn"   aria-hidden="true">
                                               <button id="add"  class="btn btn-default"  type="button" onclick="addNum()">+</button>
                                            </span>
                                        </div><!-- /input-group -->
                                             <input hidden="true" value="${goods.id}" name="goodsId">
                                         <br>
                                           库存： <span id="stock" class="m_link">${goods.stock} </span>
                                         <br>
                                         <br>
                                        <div class="input-group " >
                                        <input type="submit" value="立即购买" title="">&nbsp; <input type="button" ref="<%=request.getContextPath() %>/resources/images/goodsImages/${goods.image}" onclick="addCart()" id="addc" value="加入购物车"  title="">
                                        </div>
                                 </form>
                            </div>
                            <%--<span class="m_link"><a href="#">login to save in wishlist</a> </span>--%>
                            <p class="m_text2"> ${goods.describer} </p>

                        </div>
                         <div class="clear"></div>
                        <%--*********************************商品详情--%>
                        <div class="toogle">
                            <div role="tabpanel">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist" id="myTab">
                                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"   data-toggle="tab">商品详情</a></li>
                                    <li role="presentation" ><a href="#pingjia" aria-controls="pingjia" role="tab" data-toggle="tab" data-src="all">商品评价</a></li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="home">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <dl class="dl-horizontal">
                                                            <dt >品牌：</dt>
                                                            <dd>${goods.brand}</dd>
                                                            <dt>名称：</dt>
                                                            <dd>${goods.name}</dd>
                                                        </dl>

                                                    </div>
                                                    <div class="col-md-4">
                                                        <dl class="dl-horizontal">
                                                            <dt>硬盘：</dt>
                                                            <dd>${goods.HD}</dd>
                                                            <dt>显卡：</dt>
                                                            <dd>${goods.graphic}</dd>
                                                        </dl>

                                                    </div>
                                                    <div class="col-md-4">
                                                        <dl class="dl-horizontal">
                                                            <dt>内存：</dt>
                                                            <dd>${goods.RAM}</dd>
                                                            <dt>CPU：</dt>
                                                            <dd>${goods.CPU}</dd>
                                                        </dl>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel-body" align="center">
                                                <c:forEach items="${detailImageList}" var="detailImage">
                                                    <a href="#"><img class="img-thumbnail" style="border: 0px" src="<%=request.getContextPath() %>/resources/images/goodsImages/${detailImage}" alt=""  /></a>
                                                </c:forEach>
                                            </div>
                                        </div>


                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="pingjia">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <div role="tabpanel">

                                                    <!-- Nav tabs -->
                                                    <ul class="nav nav-tabs" role="tablist">
                                                        <li role="presentation" class="active"><a href="#suoyou" aria-controls="suoyou" role="tab" data-toggle="tab" data-src="all">所有评价</a></li>
                                                        <li role="presentation"><a href="#haoping" aria-controls="haoping" role="tab" data-toggle="tab" data-src="good">好评</a></li>
                                                        <li role="presentation"><a href="#zhongping" aria-controls="zhongping" role="tab" data-toggle="tab" data-src="middle">中评</a></li>
                                                        <li role="presentation"><a href="#chaping" aria-controls="chaping" role="tab" data-toggle="tab" data-src="bad">差评</a></li>
                                                    </ul>

                                                </div>
                                            </div>
                                            <div class="panel-body"  >
                                                <!-- Tab panes -->
                                                <div class="tab-content">
                                                    <div role="tab-pane" class="tab-pane active" id="suoyou" align="center" >
                                                        <iframe  id="iframe1"  src="<%=request.getContextPath()%>/goods/${goods.id}/comment?status="    width="90%" height="1000px" scrolling="no" frameborder="0">
                                                        </iframe>1
                                                     </div>
                                                    <div role="tab-pane" class="tab-pane" id="haoping" align="center">

                                                        <iframe id="iframe2" src=""   width="90%" height="800px" scrolling="no" frameborder="0">
                                                        </iframe>2
                                                    </div>
                                                    <div role="tab-pane" class="tab-pane" id="zhongping" align="center">

                                                        <iframe id="iframe3" src=""   width="90%" height="800px" scrolling="no" frameborder="0">
                                                        </iframe>3
                                                    </div>
                                                    <div role="tab-pane" class="tab-pane" id="chaping" align="center">
                                                        <iframe id="iframe4" src=""   width="90%" height="800px" scrolling="no" frameborder="0">
                                                        </iframe>4
                                                    </div>
                                                </div>
                                                <script type="text/javascript">
                                                    $('a[data-toggle="tab"]').on('show.bs.tab', function (event) {
                                                        var a = $(event.target);
                                                        var src = a.data('src');

                                                        if (src == 'all') {
                                                            $('#iframe1').attr("src", '<%=request.getContextPath()%>/goods/${goods.id}/comment?status=')
                                                        }
                                                        if (src == 'good') {

                                                            $('#iframe2').attr("src", '<%=request.getContextPath()%>/goods/${goods.id}/comment?status='+src)
                                                        }
                                                        if (src == 'middle') {

                                                            $('#iframe3').attr("src", '<%=request.getContextPath()%>/goods/${goods.id}/comment?status='+src)
                                                        }
                                                        if (src == 'bad') {

                                                            $('#iframe4').attr("src", '<%=request.getContextPath()%>/goods/${goods.id}/comment?status='+src)
                                                        }
                                                    })
                                                </script>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                         </div>


                        <div class="clear"></div>

                    </div>
                    <%--/////******************************右侧活动--%>
                    <div  class="rsingle span_1_of_single"   style="float:right;width: 250px">
                        <br>
                        <div class="top-border"> </div>

                        <div class="sidebar-bottom">
                            <h2 class="m_1">online promotions</h2>

                            <div class="subscribe">
                                <a href="#"  data-toggle="modal" data-target=".bs-example-modal-lg" ><img src="<%=request.getContextPath() %>/resources/images/1.png"  alt="" /></a>
                            </div>
                        </div>
                        <br>
                        <div class="top-border"> </div>
                        <div class="border">
                            <link href="<%=request.getContextPath() %>/resources/css/default.css" rel="stylesheet" type="text/css" media="all" />
                            <link href="<%=request.getContextPath() %>/resources/css/nivo-slider.css" rel="stylesheet" type="text/css" media="all" />
                            <script src="<%=request.getContextPath() %>/resources/js/jquery.nivo.slider.js"></script>
                            <script type="text/javascript">
                                $(window).load(function() {
                                    $('#slider').nivoSlider();
                                });
                            </script>
                            <div class="slider-wrapper theme-default">
                                <div id="slider" class="nivoSlider">
                                    <img src="<%=request.getContextPath() %>/resources/images/t-img1.jpg"  alt="" />
                                    <img src="<%=request.getContextPath() %>/resources/images/t-img2.jpg"  alt="" />
                                    <img src="<%=request.getContextPath() %>/resources/images/t-img3.jpg"  alt="" />

                                </div>
                            </div>
                            <!-- <div class="btn"><a href="single.html">Check it Out</a></div> -->
                        </div>

                        <div class="tabable">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab1" data-toggle="tab">同价位</a></li>
                                <li><a href="#tab2" data-toggle="tab">同品牌</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab1">
                                    <table class="table table-bordered">
                                        <c:forEach items="${equalPrice}" var="ep">
                                            <tr>
                                                <td>
                                                    <img src="<%=request.getContextPath() %>/resources/images/goodsImages/${ep.image}" class="img-responsive myimg">
                                                </td>
                                                <td class="mytd">
                                                    <p>${ep.name}</p>
                                                    <p class="price">￥${ep.price}</p>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </table>
                                </div>
                                <div class="tab-pane active" id="tab2">
                                    <table class="table table-bordered">
                                        <c:forEach items="${equalBrand}" var="eb">
                                            <tr>
                                                <td>
                                                    <img src="<%=request.getContextPath() %>/resources/images/goodsImages/${eb.image}" class="img-responsive myimg">
                                                </td>
                                                <td class="mytd">
                                                    <p>${eb.name}</p>
                                                    <p class="price">￥${eb.price}</p>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>


    </div>
    <div class="footPush"></div>
</div>
<%@include file="/jsp/public/footer.jspf"%>
</body>
</html>
